<template>
  <div class="commment">
    <h3 class="commment-top border-bottom">用户评论</h3>
    <div class="border-bottom">
      <div class="commment-desc">
        <div class="commment-tubiao">*****</div>
        <div class="commment-athor">
          随*啊
          <span>2017-12-30</span>
        </div>
        <img src="//s.qunarzz.com/piao/image/touch/sight/highQualityComment1.png" style="position: absolute;top: .2rem;right: .2rem;width: 1.42rem;height: .96rem;">
      </div>
      <p>参加故宫是来京必须要安排的行程，紫荆城的宏伟和惊艳超乎你想象，
      假装自己穿越时空，你走在乾隆皇帝走过的石板砖上，体验当年盛世的文化底蕴和奢华的生活
      </p>
      <div class="commment-img" @click="handleShow">
         <div v-for="(item,index) of comList" :key="index">
            <img :src="item" >
         </div>
      </div>
      <galley v-if="isShow" @handle-hide="handleFalse" :list="list"></galley>
    </div>
  </div>
</template>

<script>
import Galley from '@/components/galley/Galley.vue'
export default {
  name: 'DetailCommment',
  props: {
    list: Array,
    comList: Array
  },
  components: {
    Galley
  },
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    handleShow () {
      this.isShow = true
    },
    handleFalse () {
      this.isShow = false
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .commment
    background white
    margin-top 0.2rem
    .commment-top
      padding 0.2rem 0 0.2rem 0.2rem
    .commment-desc
      margin-top 0.2rem
      position relative
      overflow unset
      .commment-tubiao
        float left
        padding-left 0.4rem
      .commment-athor
        float right
      img
        position: absolute;
        top: 0.1rem;
        right: .2rem;
        width: 1.42rem;
        height: .96rem;
    p
      clear both
      word-break: break-all;
      word-wrap: break-word;
      line-height: .42rem;
      font-size: .26rem;
      color: #616161;
      padding-left 0.2rem
    .commment-img
      div
        width 30%
        float left
        margin-left 2.5%
        margin-top 0.2rem
        img
          width 100%
</style>
